<!--报告任务管理页面-->
<style lang="less" scoped>
.task {
  margin: 15px;

  .icon-btn {
    font-size: 20px;
    color: #555555;
  }
  .smallForm {
    display: inline-block;
    margin-left: 20px;
  }
  .smallArr {
    width: 15%;
    display: inline-block;
  }
}
.none {
  display: none;
}
</style>

<template>
  <div class="task">
    <Card :bordered="false">
      <p slot="title">考核标准管理 > <span class="select-font">报告任务管理</span>
      </p>
      <div>
        <Button type="primary"
                @click.native="addPolicy">新增报告任务</Button>
        <Button type="error"
                @click.native="del1"
                style="margin-left: 20px">删除报告任务</Button>
        <Form :model="searchItem"
              class="smallForm">
          <Input v-model="searchItem.name"
                 :maxlength="20"
                 style="width:200px;"
                 placeholder="请输入报告任务标题"></Input>
        </Form>
        <Button type="info"
                style="margin-left:20px"
                @click="getPolicy('1')">搜索</Button>
      </div>
    </Card>
    <div>
      <Table :data="policyData"
             @on-selection-change="showSelect"
             :columns="policyColumns"
             stripe></Table>
      <Page class="pull-right"
            :total="Page.total"
            :current="Page.current"
            :page-size="Page.pageSize"
            size="small"
            show-total
            @on-change="changePage"></Page>
    </div>
    <Modal v-model="policyModal"
           title="报告任务信息"
           width="600"
           :mask-closable="false">
      <Form :model="policyItem"
            :rules="rules"
            :label-width="110">
        <Form-item label="报告任务标题"
                   prop="title">
          <Input v-model="policyItem.title"
                 :maxlength="100"
                 placeholder="请输入任务标题"></Input>
        </Form-item>
        <Form-item label="类型"
                   prop="type">
          <Select v-model="policyItem.type"
                  clearable>
            <Option value="0">简报</Option>
            <Option value="1">总结</Option>
          </Select>

        </Form-item>
        <Form-item label="开始填写时间"
                   prop="start_time">
          <Date-picker type="date"
                       :value="policyItem.start_time"
                       format="yyyy-MM-dd"
                       @on-change="change"></Date-picker>
        </Form-item>
        <Form-item label="结束填写时间"
                   prop="end_time">
          <Date-picker type="date"
                       :value="policyItem.end_time"
                       format="yyyy-MM-dd"
                       @on-change="change1"></Date-picker>
        </Form-item>
        <Form-item label="是否需要重复"
                   prop="is_repeat">
          <Select v-model="policyItem.is_repeat"
                  clearable
                  @on-change="test">
            <Option value="0">不需要</Option>
            <Option value="1">需要</Option>
          </Select>

        </Form-item>
        <Form-item label="时间间隔"
                   prop="interval"
                   v-show="time">
          <Input v-model="policyItem.interval"
                 :maxlength="5"
                 placeholder="请输入时间间隔"></Input>
        </Form-item>
        <Form-item label="间隔单位"
                   prop="time_unit"
                   v-show="time">
          <Select v-model="policyItem.time_unit"
                  clearable>
            <Option value="年">年</Option>
            <Option value="月">月</Option>
            <Option value="日">日</Option>
          </Select>

        </Form-item>
        <Form-item label="说明"
                   prop="explain">
          <Input v-model="policyItem.explain"
                 type="textarea"
                 :maxlength="100"
                 placeholder="请输入说明"></Input>
        </Form-item>
      </Form>
      <div slot="footer">
        <Button type="primary"
                @click="ok">保存</Button>
        <Button @click="policyModal = false">取消</Button>
      </div>
    </Modal>
    <del-modal title="报告任务"
               :url="urlPolicydel"
               :delArr="selectData"
               @del="del"
               ref="delModal"></del-modal>
  </div>
</template>

<script>
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
import delModal from 'public/delModal';
export default {
  components: {
    'del-modal': delModal,
  },
  data() {
    return {
      urlPolicyList: '/syn/journaltask/list',
      urlPolicyNew: '/syn/journaltask/new',
      urlPolicydel: '/syn/journaltask/del',
      searchItem: {
        name: '',
      },
      rules: {
        title: [
          { required: true, message: '任务标题不能为空', trigger: 'blur' },
        ],
        type: [{ required: true, message: '类型不能为空', trigger: 'change' }],
        start_time: [
          { required: true, message: '开始时间不能为空', trigger: 'change' },
        ],
        end_time: [
          { required: true, message: '结束时间不能为空', trigger: 'change' },
        ],
        is_repeat: [
          { required: true, message: '请选择是否需要重复', trigger: 'change' },
        ],
      },
      policyItem: {
        is_repeat: '',
      },
      policyModal: false,
      Page: {
        current: 1,
        pageSize: 13,
        total: 0,
      },
      policyData: [],
      policyColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left',
        },
        {
          title: '标题',
          key: 'title',
        },
        {
          title: '开始填写时间',
          key: 'start_time',
        },
        {
          title: '结束填写时间',
          key: 'end_time',
        },
        {
          title: '类型',
          render: (h, params) => {
            if (params.row.type == '0') {
              return h('div', {}, '简报');
            } else if (params.row.type == '1') {
              return h('div', {}, '总结');
            }
          },
        },
        {
          title: '任务状态',
          key: 'task_status',
        },
        {
          title: '说明',
          key: 'explain',
        },
        {
          title: '是否需要重复',
          render: (h, param) => {
            if (param.row.is_repeat == '0') {
              return h('div', {}, '否');
            } else if (param.row.is_repeat == '1') {
              return h('div', {}, '是');
            }
          },
        },
        {
          title: '重复间隔',
          key: 'interval',
        },
        {
          title: '时间间隔单位',
          key: 'time_unit',
        },
      ],
      selectData: [],
      daoruUrl: '',
      saveUrl: '',
      actionPage: '1',
      spinShow: false,
      time: false,
    };
  },
  methods: {
    getPolicy(page = 1) {
      let params = {
        data: {
          page,
          pageSize: this.Page.pageSize,
          searchValue: {},
          order: { _id: -1 },
        },
        url: this.urlPolicyList,
        token: storage.session.get('token'),
        success: res => {
          this.policyData = res.data.result.result;
          this.Page.total = res.data.result.totalSize;
        },
      };
      if (this.searchItem.name !== '') {
        params.data.searchValue.title = `${this.searchItem.name}|#|like`;
      }
      ajaxPost(params);
    },
    showSelect(data) {
      this.selectData = data; // 把勾选的数组存起来
    },
    change(data) {
      this.policyItem.start_time = data;
    },
    change1(data) {
      this.policyItem.end_time = data;
    },
    addPolicy() {
      this.policyModal = true;
      this.policyItem = {
        title: '',
        start_time: '',
        end_time: '',
        explain: '',
        type: '',
        time_unit: '',
        interval: '',
        is_repeat: '',
      };
      this.btnSave = true;
    },
    ok() {
      let params = {
        data: {
          title: this.policyItem.title,
          start_time: this.policyItem.start_time,
          end_time: this.policyItem.end_time,
          type: this.policyItem.type,
          explain: this.policyItem.explain,
          is_repeat: this.policyItem.is_repeat,
        },
        url: this.urlPolicyNew,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code == '0000') {
            this.$Loading.finish();
            this.$Message.success({
              content: '修改成功',
            });
            this.policyModal = false;
            this.getPolicy(this.actionPage);
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      if (this.time) {
        params.data.interval = this.policyItem.interval;
        params.data.time_unit = this.policyItem.time_unit;
      }
      ajaxPost(params);
    },
    changePage(page) {
      this.actionPage = page;
      this.getPolicy(page);
    },
    edit(row) {
      this.policyModal = true;
      this.policyItem.title = row.title;
      this.policyItem.start_time = row.start_time;
      this.policyItem.end_time = row.end_time;
      this.policyItem.explain = row.explain;
      this.policyItem.type = row.type;
    },
    del() {
      this.selectData = [];
      this.getPolicy(this.actionPage);
    },
    del1() {
      if (this.selectData.length > 0) {
        this.$refs.delModal.showModal();
      } else {
        this.$Message.warning('请选择报告任务');
      }
    },
    test(data) {
      if (data === '1') {
        this.time = true;
      } else {
        this.time = false;
      }
    },
  },
  mounted() {
    this.getPolicy();
  },
};
</script>
